page {
	display: flex;
	flex-direction: column;
	background-color: #fefffe;
}

.navigation-bar {
	background-color: transparent;
}

.navigation-bar-scroll {
	background-color: #edeeee;
}

.back-icon {
	width: 22px;
	height: 22px;
	
	position: relative;
	margin-left: 20rpx;
	
	align-self: center;
}

.middle-title {
	align-self: center;
	font-weight: 400;
	font-size: 18px;
}

.camera-icon {
	align-self: center;
	
	width: 22px;
	height: 22px;
	
	position: relative;
	margin-right: 20rpx;
	
}

.myInfo {
	/* height: 120px; */
	/* height: 600upx; */
	background-color: #fefffe;
	
	/* #ifdef H5 */
	/* padding-top: 120rpx; */
	/* padding-bottom: 80rpx; */
	/* #endif */
	/* #ifndef H5 */
	/* padding-top: 200rpx; */
	/* padding-bottom: 100rpx; */
	/* #endif */
	

}

.bg-image {
	/* position: relative; */
	/* top: -80px; */
	position: relative;
	margin-top: -110px;
}

.title {
	padding-top: 10px;
	color: #FFFFFF;
	font-weight: 600;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.options {
	margin-top: 32px;
	margin-right: 20px;
	
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.real-me {
	margin-top: 2px;
	
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.person-box {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
	margin-top: -56px;
}

.one-line {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	
	align-self: flex-end
}

.left-nickname {
	align-self: center;
	font-size: 20px;
	font-weight: 700;
	color: #fefffe;
	z-index: 99;
	margin-top: -12px;
}

.right-face {
	width: 70px;
	height: 70px;
	border-radius: 5px;
	margin-left: 10px;
	margin-right: 20px;
}

.two-line {
	margin-top: 8px;
	font-size: 14px;
	color: #6f6d68;
	
	align-self: flex-end;
	margin-right: 10px;
}


.whole-box {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
	margin-top: 30px;
	box-sizing: border-box;
}

.one-content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding: 0 20px;
}

.right-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
	margin-left: 10px;
	flex-grow: 1;
	
	/* background-color: beige; */
}

.left-face {
	width: 46px;
	height: 46px;
	border-radius: 5px;
	flex-shrink: 0;
}

.nickname {
	color: #576b95;
	font-weight: 500;
	font-size: 17px;
}

.say-words {
	font-size: 16px;
	margin-top: 4px;
}

.more-operator {
	/* margin-top: 8px; */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	/* padding: 10rpx 0; */
	height: 32px;
	overflow: auto;
}
.more-operator::-webkit-scrollbar {
  display: none;
}

.left-wrapper {
	align-self: center;
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
}

.publish-time {
	color: #b2b2b2;
	align-self: center;
	font-size: 14px;
}

.icon-trash {
	width: 18px;
	height: 18px;
	align-self: center;
	margin-left: 2px;
}

.more-right-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	
	flex-shrink: 0;
}

.black-operater-box {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background-color: #4c4c4c;
	
	color: #f9faf9;
	/* padding: 10rpx 26rpx; */
	padding: 0 22rpx;
	border-radius: 5px;
	
	margin-right: 6px;
	
	position: relative;
}

.black-left-oper {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.black-right-oper {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.icon-zan {
	width: 18px;
	height: 18px;
	align-self: center;
	margin-right: 2px;
}

.icon-comments {
	width: 16px;
	height: 16px;
	align-self: center;
	margin-right: 2px;
}

.oper-words {
	align-self: center;
	font-size: 14px;
}

.black-middle-line {
	color: #383838;
	align-self: center;
	margin: 0 20rpx;
}

.two-points-box {
	background-color: #f6f7f6;
	width: 36px;
	height: 22px;
	border-radius: 5px;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	align-self: center;
}

.right-points {
	width: 12px;
	height: 4px;
	align-self: center;
}

.image-list {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	
	margin-top: 10px;
	
	max-width: 520rpx;
}

.one-image-width {
	width: 120px;
}

.one-image-height {
	width: 220px;
}

.more-image {
	width: 160rpx;
	height: 160rpx;
	
	margin-right: 5px;
	margin-bottom: 5px;
}

.every-video-cover-box {
	position: relative;
	/* display: inline-block; */
	width: 100%;
	height: 100%;
	/* background-color: aquamarine; */
	opacity: 0;
}

.like-friend-list-box {
	margin-top: 6px;
	background-color: #f6f7f6;
	padding: 6px;
	border-radius: 5px;
	
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.like-list {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.icon-like {
	width: 16px;
	height: 16px;
	align-self: center;
	margin-left: 4px;
}

.like-friend-wrods {
	color: #576b95;
	font-weight: 500;
	align-self: center;
	margin-left: 4px;
}

.comments-list {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.one-line-content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 4px;
}

.two-friends-together {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background-color: blanchedalmond;
	/* flex-shrink: 0; */
}

.friend-name {
	color: #576b95;
	font-weight: 500;
	align-self: flex-start;
	flex-shrink: 0;
}

.replay-words {
	margin: 0 4px;
	align-self: flex-start;
	flex-shrink: 0;
}

.comment-content {
	margin-left: 6px;
	align-self: center;
	/* shape-outside: circle(50%); */
	word-wrap: break-word;
	overflow-wrap: break-word;
	
}

.load-more-comments {
	margin-top: 2px;
	
	color: #576b95;
	font-weight: 500;
	flex-shrink: 0;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
}





.message-wrapper {
	padding: 6px;
	width: 100%;
	/* height: 60px; */
	
	/* #ifdef H5 */
	height: 60px;
	/* #endif */
	/* #ifndef H5 */
	height: 92px;
	/* #endif */
	
	height: auto;
	
	position: fixed;
	bottom: 0;
	
	/* padding-bottom: 42px; */
	
	background-color: #f7f8f7;
	z-index: 77777;
	/* #ifdef H5 */
	/* padding-bottom: 20px; */
	/* #endif */
	/* #ifndef H5 */
	/* padding-bottom: 40px; */
	/* #endif */
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	box-sizing: border-box;
}

.message-line {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.message-input {
	font-size: 16px;
	/* background-color: blue; */
	/* border-radius: 20px; */
	/* width: 100%; */
	height: 40px;
	/* max-height: 120px; */
	/* line-height: 22px; */
	/* padding-left: 12px;
	padding-right: 12px; */
	/* margin-left: 10px; */
	padding: 5px;
	align-self: flex-end;
	background-color: #fefffe;
	
	flex-grow: 1;
	box-sizing: border-box;
}
.placeholder-class {
	color: #aaaaaa;
	/* background-color: #f5f5f5; */
}

.icons-wrapper {
	
	/* #ifdef H5 */
	/* width: 18%; */
	/* #endif */
	/* #ifndef H5 */
	/* width: 25%; */
	/* #endif */
	
	/* background-color: red; */
	
	display: flex;
	flex-direction: row; 
	justify-content: flex-start;
	align-self: center;
}

.icon-message {
	min-width: 29px;
	width: 29px;
	height: 29px;
	margin-right: 6px;
	margin-left: 6px;
	align-self: center;
}